To make good looking Vue apps, we need to style our components.
To make our lives easier, we can use components with styles built-in.
We look at how to customize progress bars and add sidebars.
Width and Height
We can change the width of the b-progress component the way we like.
For instance, we can write:
<template>
<div id="app">
<b-progress :value="value" class="w-50 mb-2"></b-progress>
</div>
</template>
<script>
export default {
data() {
return {
value: 75
};
}
};
</script>
to make it fill half the screen.
The height can also be changed.
For example, we can write:
<template>
<div id="app">
<b-progress :value="value" height="2rem"></b-progress>
</div>
</template>
<script>
export default {
data() {
return {
value: 75
};
}
};
</script>
We set the height to 2rem , so the progress bar would be taller.
Backgrounds
We can change the background of the progress bar the way we like.
This can be done with the variant prop.
For example, we can write:
<template>
<div id="app">
<b-progress :value="value" variant="success"></b-progress>
</div>
</template>
<script>
export default {
data() {
return {
value: 75
};
}
};
</script>
Then we see a green bar because we set the variant to 'success' .
Striped Backgrounds
The background of a progress bar can be made striped.
To make it striped, we add the striped prop.
For example, we can write:
<template>
<div id="app">
<b-progress :value="value" striped></b-progress>
</div>
</template>
<script>
export default {
data() {
return {
value: 75
};
}
};
</script>
Now the bar is striped.
Animated Backgrounds
The background of the progress bar can be also be animated.
We just have to set the animated prop to do that:
<template>
<div id="app">
<b-progress :value="value" animated></b-progress>
</div>
</template>
<script>
export default {
data() {
return {
value: 75
};
}
};
</script>
Sidebar
We can create a sidebar with BootstrapVue.
This is a component that’s available since 2.10.0.
To create one, we use the b-sidebar component:
<template>
<div id="app">
<b-button v-b-toggle.sidebar>Toggle</b-button>
<b-sidebar id="sidebar" title="Sidebar" shadow>
<div class="px-3 py-2">
<p>foo</p>
<b-img src="http://placekitten.com/200/200" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
<script>
export default {};
</script>
We have the v-b-toggle directive.
The sidebar modifier matches the name of the id of the b-sidebar to let us open the sidebar.
On the b-siderbar component, we set the title prop, which sets the title.
shadow enables shadows.
And the rest of the content displayed below the title.
Placement
The placement can be changed with props.
The right prop will put the sidebar on the right instead of the left.
For example, we can write:
<template>
<div id="app">
<b-button v-b-toggle.sidebar>Toggle</b-button>
<b-sidebar id="sidebar" title="Sidebar" right shadow>
<div class="px-3 py-2">
<p>foo</p>
<b-img src="http://placekitten.com/200/200" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
<script>
export default {};
</script>
Now the sidebar opens from the right instead of the left.
Styling Variants
We can use the bg-variant to change the styling variant of the background.
The text-variant is used to change the styling of the text.
For example, we can write:
<template>
<div id="app">
<b-button v-b-toggle.sidebar>Toggle</b-button>
<b-sidebar id="sidebar" title="Sidebar" bg-variant="success" text-variant="light" shadow>
<div class="px-3 py-2">
<p>foo</p>
<b-img src="http://placekitten.com/200/200" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
<script>
export default {};
</script>
Then the text is white since text-variant is light .
bg-variant is success so the background is green.
Borders
We can add borders with BootstrapVue’s border utility classes.
For example, we can write:
<template>
<div id="app">
<b-button v-b-toggle.sidebar>Toggle</b-button>
<b-sidebar id="sidebar" title="Sidebar" sidebar-class="border-right border-success">
<div class="px-3 py-2">
<p>foo</p>
<b-img src="http://placekitten.com/200/200" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
<script>
export default {};
</script>
We added the sidebar-class prop to let us set the border class.
border-right adds the border to the right.
border-success makes the border green.
Conclusion
The progress bar can be styled the way we want.
Also, we can add sidebars with BootstrapVue.
We can add content and control background, border, and text colors.
